<template>
	<view>
		<view class="p-2 bg-white">
			<view class="py-2 text-center mt-2" @click="scanMachineCode">
				<text class="iconfont icon-saomiao text-danger line-h0"></text>
				<view>点击扫描二维码</view>
			</view>
			<view class="py-2 pl-20 position-relative line-h">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">
				<text class="text-danger">*</text>二维码：
				</view>
				<input class="border p-2 w-100 d-block line-h border-box input-defind rounded font-md" 
				 :class="focusClass.macCode ? 'input-border-color' : ''"
				placeholder-class="text-light-muted" @input="inputEvent($event,'macCode')"
				 @focus="focus('macCode')" @blur="blur($event,'macCode')"
				 placeholder="请输入二维码" v-model="formData.macCode"/>
			</view>
			<view class="py-2 pl-20 position-relative line-h" v-if="formData.machineName">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">
					基本信息：
				</view>
				<view>{{formData.machineName}}
				</view>
			</view>
			<view class="py-2 pl-20 position-relative line-h">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">
				<text class="text-danger">*</text>故障类型：
				</view>
				<view class="d-flex">
					<view class="mr-1" @click="selectProblemType(1)">
						<text class="iconfont text-danger font-lg" :class="formData.problemType===1?'icon-danxuankuangxuanzhong':'icon-danxuankuang1'"></text>
						<text>机器故障</text>
					</view>
					<view @click="selectProblemType(2)">
						<text class="iconfont text-danger font-lg" :class="formData.problemType===2?'icon-danxuankuangxuanzhong':'icon-danxuankuang1'"></text>
						<text>耗材故障</text>
					</view>
				</view>
			</view>
			<view class="py-2 pl-20 position-relative line-h">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">
				<text class="text-danger">*</text>故障等级：
				</view>
				<view>
					<picker @change="bindPickerChange" :value="formData.problemLevel" :range="levelList">
					    <view class="border p-2 w-100 d-block  border-box input-defind rounded font-md line-h">
							<text v-if="formData.problemLevel===''" class="text-light-muted">请选择故障等级</text>
							<text v-else>{{levelList[formData.problemLevel]}}</text>
						</view>
					</picker>
				</view>
			</view>
			<view class="py-2 pl-20 position-relative line-h">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">
				<text class="text-danger">*</text>故障现象：
				</view>
				 <textarea class="border p-2  d-block rounded font-md" 
				 placeholder-class="text-light-muted" placeholder="请输入故障现象"
				 :class="focusClass.problem ? 'input-border-color' : ''"
				 @input="inputEvent($event,'problem')"
				  @focus="focus('problem')" @blur="blur($event,'problem')" auto-height
				  v-model="formData.problem" style="width:468upx"/>
			</view>
			<view class="py-2 position-relative line-h">
				<view class="pl-2 font-md"> 图片上传：</view>
				<image-upload :imageList="imageList"></image-upload>
			</view>
			<view class="main-bg-color text-white rounded mt-4 font-md text-center py-2" hover-class="main-bg-hover-color" @click="submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/api.js'
	import imageUpload from "@/components/imageUpload/imageUpload.vue"
	// import {mapState,mapMutations} from 'vuex';
	export default {
		components:{
			imageUpload
		},
		data() {
			return {
				levelList:[1,2,3],/**故障 */
				imageList: [],/**图片列表 */
				formData:{
					macId:'',
					macCode:'',
					machineName: '', 
					problemLevel:'',
					problemType:1,
					problem:''
				},
				focusClass:{
					macId:false,
					macCode:false,
					machineName: false, 
					problemLevel:false,
					problemType:false,
					problem:false,
				}
			}
		},
		methods: {
			focus(key){
				this.focusClass[key] = true
			},
			blur(e,key){
				this.focusClass[key] = false
				switch(key){
					case 'macCode':
					this.formData.macCode = e.detail.value
					this.getMachine();
					break;
				}
			},
			inputEvent(e,key){
				switch(key){
					case 'problem':
					this.formData.problem = e.detail.value
					break;
				}
			},
			scanMachineCode(){
				let self= this;
				uni.scanCode({
				    success: function (res) {
						self.formData.macCode = res.result
						self.getMachine();
				    }
				});
			},
			getMachine(){
				this.$H.get(api.getMachineByMacCode,{macCode:this.formData.macCode}).then(res=>{
					console.log(res)
					this.formData.machineName =`${res.content.plasmaStationName}-${res.content.type}-${res.content.macCode}`
					this.formData.macId = res.content.id
				},error=>{
					console.log(error)
					uni.hideToast()
					uni.showToast({
						title:"请输入正确的二维码",
						icon:'none'
					})
					this.formData.machineName =''
					this.formData.macId = ''
				})
			},
			selectProblemType(value){
				this.formData.problemType =value
			},
			bindPickerChange(e){
				this.formData.problemLevel =e.detail.value
			},
			submit(){
				if(!this.formData.machineName){
					uni.showToast({
					    title: '二维码不能为空',
					    duration: 2000
					});
					return
				}
				if(!this.formData.problemType){
					uni.showToast({
					    title: '请选择故障等级',
					    duration: 2000
					});
					return
				}
				if(!this.formData.problemType){
					uni.showToast({
					    title: '故障现象不能为空',
					    duration: 2000
					});
					return
				}
				debugger;
				let postData={
					macId: this.formData.macId,
					problem: this.formData.problem,
					problemType: this.formData.problemType,
					problemLevel: this.levelList[this.formData.problemLevel]
				}
				this.imageList.forEach((item,index)=>{
					postData['picture' + (index+1)] = item.path
				})
				this.$H.post(api.addRepair,postData).then(res=>{
					uni.showToast({
					    title: '报修成功',
						icon:'success',
					    duration: 2000
					});
					uni.redirectTo({
						url:'/pages/repairList/repairList'
					})
				})
			}
		}
	}
</script>

<style scoped>
.icon-saomiao{
	font-size: 120upx;
}
</style>
